<template>
  <div class="message">
	<view class="title">
		<router-link :underline="false" :to="{ path: '/pages/user/index' }"><span class="arrowLeft"></span></router-link>
		<span class="name">{{$t('resetPwd.pwd')}}</span>
		<span></span>
	</view>
    <div class="loginbox">
		<view class="forms">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
				<el-form-item prop="old_login_password">
				  <el-input :placeholder="$t('resetPwd.oldP')" v-model="ruleForm.old_login_password" show-password></el-input>
				</el-form-item>
				<el-form-item prop="new_login_password">
				  <el-input :placeholder="$t('resetPwd.newP')" v-model="ruleForm.new_login_password" show-password></el-input>
				</el-form-item>
				<el-form-item prop="renew_login_password">
				  <el-input :placeholder="$t('resetPwd.rePwd')" v-model="ruleForm.renew_login_password" show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="submit" @click="submitForm('ruleForm')">{{$t('register.confirm')}}</el-button>
				</el-form-item>
			</el-form>
		</view>
    </div>
    <div id="captcha"></div>
  </div>
</template>

<script>
import generateID from '@/utils/generateID'
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
import md5 from 'js-md5'

export default {
	name: 'register',
	data() {
		var validatePass = (rule, value, callback) => {
			if (value) {
				let z_reg = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*])|(?=.*\d)(?=.*[#@!~%^&*]))[a-z\d#@!~%^&*]{6,12}/i
				if (z_reg.test(value)) {
				  callback()
				} else {
				  callback(this.$t('resetPwd.pwdVail'))
				}
			}
		}
		return {
			ruleForm: {
				username: '',
				old_login_password:null,
				new_login_password: null
			},
			different:this.$t('resetPwd.different'),
			samePwd:this.$t('resetPwd.samePwd'),
			region: '',
			rules: {
				old_login_password: [
					{
						required: true,
						message: this.$t('resetPwd.valid.oldpwd'),
						trigger: 'blur'
					},
					{ required: true, validator: validatePass , trigger: "blur" }
				],
				new_login_password: [
					{
						required: true,
						message: this.$t('resetPwd.valid.newpwd'),
						trigger: 'blur'
					},
					{ required: true, validator: validatePass , trigger: "blur" },
					{ validator: this.newValidateOldPassword, trigger: 'blur' }
				],
				renew_login_password: [
				  {required: true, message: this.$t('resetPwd.valid.renewpwd'), trigger: 'blur' },
				  { validator: this.newValidateConfirmPassword, trigger: 'blur' }
				]
			},
			captchaPoup: null,
			timer: null,
			show: true,
			count: '',
			user: {},
			active: 'email',
			mdf: 't'
		}
	},

  methods: {
    submitForm(formName) {
		let that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // let user = JSON.parse(JSON.stringify(this.ruleForm))
          let ruleFormNew = {}
         ruleFormNew = {
           username: this.user.username,
           old_login_password: md5(this.ruleForm.old_login_password).toUpperCase(),
           new_login_password: md5(this.ruleForm.new_login_password).toUpperCase(),
		   token:getToken()
         }
		 console.log(ruleFormNew);
		  this.$api.password.modifyPayPassword(ruleFormNew).then((res) => {
		  	if (res.code == '200') {
		  		let data = JSON.parse(res.data)
		  		console.log(data);
				this.$message({
					message: this.$t('resetPwd.suc'),
					type: 'success',
					onClose: () => {
					  that.$router.push({ path: '/pages/user/index' })
					}
				})
		  	}
		  })
		  .catch((res) => {})
        } else {
          return false
        }
      })
    },
	async getPersonalInfo() {
		let params = {
			token: getToken()
		}
		const {code, data} = await this.$api.login.getPersonalInfo(params)
		if(code === 200) {
			this.user = data
		}
	},
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
	newValidateConfirmPassword(rule, value, callback) {
		if (value !== this.ruleForm.new_login_password) {
	        callback(new Error(this.different));//this.$t('resetPwd.different')
		} else {
	        callback();
		}
	},
	newValidateOldPassword(rule, value, callback) {
		if (value == this.ruleForm.old_login_password) {
	        callback(new Error(this.samePwd));//this.$t('resetPwd.samePwd'
		} else {
	        callback();
		}
	},
    initClient() {
    }
  },
  mounted() {
	this.getPersonalInfo()
  },
  created() {
  }
}
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1831726497203282&ev=PageView&noscript=1"/></noscript>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=260732735192244&ev=PageView&noscript=1"/></noscript>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1816023618776354&ev=PageView&noscript=1"/></noscript>
<style lang="scss">
.message {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url('@/static/images/set/setbg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		box-sizing: border-box;
		.arrowLeft{
			display:block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 75rpx/60rpx PingFangSC;
			color: #fff;
			padding-top: 200rpx;
			display: block;
			width:100%;
		}
	}
	// .arrowRight{
	// 	display: inline-block;
	// 	background:url(@/static/images/set/right1.png) no-repeat 0 36rpx;
	// 	width:34rpx;
	// 	height:68rpx;
	// 	background-size:100%;
	// }
	// }
	.loginbox {
		position: absolute;
		top:460rpx;
		bottom: 0;
		width: 90%;
		margin:0 auto;
		h4 {
			font: 500 56rpx/150rpx Arial;
			text-align: center;
		}
		/deep/.el-input__inner {
			margin:0 auto;
			width: 90%;
			height: 170rpx;
			background: #FFFFFF !important;
			box-shadow: 0px 4rpx 40rpx 0rpx rgba(109,80,223,0.1) !important;
			border-radius: 40rpx !important;
			border:0 !important;
			color:#999 !important;
			font-weight: normal !important;
			font-family: PingFangSC;
		}
		.login-tabs {
			display: flex;
			width: 100%;
			height: 96rpx;
			border: 1px solid #ccc;
			border-radius: 48rpx;
			margin-bottom: 6rpx;
			.item {
				flex: 1;
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				margin: 6rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #666;
				cursor: pointer;
				&.active {
					color: #8286cf;
					border-radius: 48rpx;
					background-color: #e6e7fc;
				}
			}
		}
		
		.demo-ruleForm {
			margin-top:10rpx;
			.el-form-item {
			    margin-bottom: 32px;
			}
			.link {
				color: rgba(255, 255, 255, 0.5);
				font: 400 24rpx/60rpx Arial;
			}
			.submit {
				margin-top: 200rpx;
				width: 100%;
				height: 100rpx !important;
				font-size: 32rpx;
				color:rgba(255, 255, 255, 1);
				background: #6D50DF !important;
				border-radius: 25px;
				border:0;
			}
			
			.el-input__suffix {
				position: absolute;
				left: 30rpx;
				right: auto;
				line-height: 96rpx;
				color: #999;
			}
			.sms {
				position: relative;
				.hint {
					position: absolute;
					left: 0;
					bottom: -30rpx;
					// display: inline-block;
					font-size: 20rpx;
					color: #f56c6c;
					z-index: 999;
					height: 40rpx;
					line-height: 20rpx;
					
				}
				.el-form-item__error {
					width: 100%;
					z-index: 9999;
					background-color: #fff;
				}
			}
			.el-input-group__append {
			  border-radius: 46rpx;
			  border: 0px  !important;
			  background-color:transparent  !important;
			  .el-button {
				  height: 96rpx;
				  border: 0px solid transparent !important;
				  background: #6D50DF !important;
				  border-radius: 25px;
			  }
			}
		}
	}
}
.google {
	margin-top: 3rem;
	text-align: center;
	.google-button {
		display: inline-block;
		text-align: center;
	}
	#signInDiv {
		iframe {
			margin: 0 !important;
			left: calc(50% - 105px) !important;
		}
	}
}
</style>

